<template>
	<div class="page">
		<div class="page_main" ref="pageMain" v-if="isMobile">
			<Loading :showTip='showTip'></Loading>
			<Header :appTitle='title' :webType="type"></Header>
			<router-view @setDataObject="setDataObject"></router-view>
			<Footer :webType="type" :isLogin="isLogin"></Footer>
		</div>
		<div v-else class="nomobile">
			<span>请使用移动设备访问!<br/>Please use mobile device access!<a href="javascript:;" @click="refreshClickHandle">重试(Retry)</a></span>
		</div>
	</div>
</template>
<script>
	import Loading from './components/loading.vue';
	export default {
		name: 'app',
		data: function(){
			return this.$store.state.app
		},
		components:{
			Loading: Loading,
			Header: r => require.ensure([], () => r(require('./components/header.vue')), 'common_header'),
			Footer: r => require.ensure([], () => r(require('./components/footer.vue')), 'common_footer'),
			UpdateFile: r => require.ensure([], () => r(require('./components/updatefile.vue')), 'update_file')
		},
		mounted:function(){
			const that = this;
			const Cookie = window.Cookie();
			let userToken = Cookie.get('userToken');
			this.$store.commit("setAppState", {
				isLogin: userToken ? true : false
			})
			if (!window.device.os.isAndroid && !window.device.os.isIOS){
				this.$set(this, "isMobile", false);
			}
		},
		watch:{
		},
		methods:{
			setDataObject(v){
				const that = this;
				$.extend(that.$data, v);
			},
			refreshClickHandle(){
				location.reload();
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	body{
		font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
		padding:0;
		margin:0;
		background-color: #efefef;
		ul{
			padding:0;
			margin:0;
			list-style: none;
			li{
				padding:0;
				margin:0;
				list-style: none;
			}
		}
		h1{
			padding:0;
			margin:0;
		}
		p{
			padding:0;
			margin:0;
		}
		.page{
			.page_main{
				&.off{

				}
			}
		}
		.nomobile{
			position: fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			flex-direction: row;
			-webkit-flex-wrap: nowrap;
			flex-wrap: nowrap;
			justify-content: center;
			-webkit-justify-content: center;
			align-content: center;
			-webkit-align-content: center;
			align-items: center;
			-webkit-align-items: center;
			display: flex;
			display: -webkit-flex;
			display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
			display: -moz-box; /* Firefox 17- */  
			display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
			display: -moz-flex; /* Firefox 18+ */  
			display: -ms-flexbox; /* IE 10 */  
			font-size: 24/@base;
			color:#999;
			span{
				display:block;
				a{
					display:block;
					text-decoration: none;
					color:#333;
					margin:20/@base 0;
				}
			}
		}
	}
	.icon{
		background-image: url(./assets/1.png);
		background-repeat: no-repeat;
		display:block;
	}
	.icon2{
		background-image: url(./assets/2.png);
		background-repeat: no-repeat;
		display:block;
	}
	.icon3{
		background-image: url(./assets/4.png);
		background-repeat: no-repeat;
		display:block;
	}

</style>